<template>
  <el-button type="primary" class="btn" @click="batchExportExcel"
    >批量导出(Excel)</el-button
  >
  <el-button type="success" class="btn" @click="chooseExportExcel"
    >选择导出(Excel)</el-button
  >

  <el-table
    :data="customerList"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="50" />
    <el-table-column type="index" label="序号" width="65" />
    <el-table-column property="ownerDO.name" label="负责人" width="120" />
    <el-table-column property="activityDO.name" label="所属活动" />
    <el-table-column label="姓名">
      <template #default="scope">
        <a href="javascript:" @click="view(scope.row.id)">{{
          scope.row.clueDO.fullName
        }}</a>
      </template>
    </el-table-column>
    <el-table-column property="appellationDO.typeValue" label="称呼" />
    <el-table-column property="clueDO.phone" label="手机" width="120" />
    <el-table-column property="clueDO.weixin" label="微信" width="120" />
    <el-table-column property="needLoanDO.typeValue" label="是否贷款" />
    <el-table-column property="productDO.name" label="选购产品" />
    <el-table-column
      property="nextContactTime"
      label="下次联系时间"
      width="165"
    />
    <el-table-column label="操作" width="85">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"
    />
  </p>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { doGet, doPost, doDelete } from "../http/httpRequest.js";
import { getToken, goBack, messageTip, messageConfirm } from "../util/util.js";
import axios from "axios";
import router from "@/router/router";

//客户列表数据对象，初始值是空
let customerList = ref([
  {
    clueDO: {},
    ownerDO: {},
    activityDO: {},
    appellationDO: {},
    needLoanDO: {},
    intentionStateDO: {},
    stateDO: {},
    sourceDO: {},
    intentionProductDO: {},
  },
]);
let pageSize = ref(0);
let total = ref(0);
let customerIdArray = ref([]);
//勾选或取消勾选时，触发该函数
function handleSelectionChange(selectionnDataArray) {
  customerIdArray.value = [];
  selectionnDataArray.forEach((data) => {
    let customerId = data.id;
    customerIdArray.value.push(customerId);
  });
}
onMounted(() => {
  getData(1);
});
function getData(current) {
  doGet("/api/customers", {
    current: current, //当前页，前面是参数名，后面是参数值
  }).then((resp) => {
    if (resp.data.code === 200) {
      Object.assign(customerList.value, resp.data.data.list);
      customerList.value.length = resp.data.data.list.length;
      pageSize.value = resp.data.data.pageSize;
      total.value = resp.data.data.total;
    }
  });
}
function toPage(number) {
  //number值是element-plus回调时传给我们的，number这个值就是当前页
  getData(number);
}
function exportExcel(ids) {
  let token = getToken();
  //向后端发送一个请求
  let iframe = document.createElement("iframe");
  if (ids) {
    iframe.src =
      axios.defaults.baseURL +
      "/api/exportExcel?Authorization=" +
      token +
      "&ids=" +
      ids;
  } else {
    iframe.src =
      axios.defaults.baseURL + "/api/exportExcel?Authorization=" + token;
  }
  iframe.style.display = "none"; //iframe隐藏，在页面上不显示
  document.body.appendChild(iframe);
  //后端查询数据库
  //前端浏览器下载
}
function batchExportExcel() {
  exportExcel(null);
}
function chooseExportExcel() {
  if (customerIdArray.value.length <= 0) {
    messageTip("请选择要导出的数据", "warning");
    return;
  }
  let ids = customerIdArray.value.join(",");
  exportExcel(ids);
}
function view(id) {
  router.push("/dashboard/customer/detail/" + id);
}
</script>

<style scoped>
.el-table {
  margin-top: 10px;
}
</style>